<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script  src='${pageContext.request.contextPath}/js/jquery-1.12.4.js'></script>
</head>
<body>
    <script type="text/javascript">
        $(function(){
        	  //页面加载完毕执行
        	  $("button").click(function(){
        		    //获得用户输入的员工编号
        		    var eno = $("input[name=empno]").val().trim();
        		    if(eno==null || eno==''){
        		    	 alert("请输入员工编号再查询");
        		    	 return;
        		    }
        		    
        		    //发送ajax请求查询
        		     $.ajax({  
        	             type: "POST",  //   /ssm01/
        	             url: "${pageContext.request.contextPath}/emp/queryByEmpno",  
        	             data: {'empno': eno},  
        	             dataType: "json",  
        	             success: function(data){  
        	            	        console.log(data);
        	                         var  e = data;
        	                        $("#info").html("<h3>"+e.empno+","+e.ename+","+e.esex+","+e.esalary+
        	                        		","+e.dept.dname+","+e.dept.location+","+e.mgr.ename+"</h3>"); 
        	                      
        	                      },  
        	             error:function(e){  
        	                         console.log(e);  
        	             }  
        	         });  
        		    
        		    //
        		  
        	  });
        	
        });
    
    </script>
    请输入员工编号: <input name="empno"/>
    <button>查询</button>
   <div id="info">
      
   </div>
</body>
</html>